<template>
  <div class="menuBox" @mouseleave="mouseleave">
    <div class="menuList">
      <span
        :class="[menuStyle.color, { 'menu-active': (menuActive && index == 0) || (haiguanActive && index == 1) || (dataServeActive && index == 3), spanactive: select == 'spanactive' && index == 0 && menuStyle.color != 'white' }]"
        v-for="(item, index) in menuList.filter(item => {
          if(!isHomePage){
            return item.title != '新闻中心'
          }else{
            return item
          }
        })" :key="index" @mouseover="mouseover(item, index)" @click="handleClick(item)">{{
          item.title }}</span>
    </div>
    <businessBox @mouseleave="mouseleave" :class="['common', { active: show }]"></businessBox>
  </div>
</template>

<script>
import businessBox from "@/views/Main/module/businessBox";
export default {
  name: "menuBox",
  props: {
    menuStyle: {
      default: () => {
        color: 'whiteColor'
      }
    }
  },
  computed: {
    menuActive() {
      return this.$route.matched.map(x => x.name).includes('bigPage2')
    },
    haiguanActive() {
      // return this.$route.name=='customsDeclaration'
      return this.$route.matched.map(x => x.name).includes('bigPage4')
    },
    dataServeActive() {
      return this.$route.name == 'apiNoOpen'
    },
    isHomePage(){
      return this.$route.name == 'home'
    }
  },
  components: {
    businessBox
  },
  methods: {
    mouseover(item, index) {
      if (index === 0) {
        /* 业务办理下路由时 不显示下拉 */
        if (this.expectPath.includes(this.$route.fullPath)) {
          return
        }
        this.show = true
        this.select = 'spanactive'
      } else {
        this.show = false
        this.select = ''
      }

    },
    mouseleave() {
      this.show = false
      this.select = ''

    },
    handleClick(item) {
      this.$router.push({ name: item.name, query: item.query })
    }
  },
  data() {
    return {
      show: false,
      select: '',
      mIndex: '',
      menuList: [
        {
          title: '业务办理',
          name: 'addBulk'
        }, {
          title: '海关报关',
          // name:'shippingManifest'
          name: 'customsDeclaration'
        }, {
          title: '新闻中心',
          name: 'newsList'
        },
        {
          title: '数据服务',
          name: 'apiDetial'
        },
      ],
      expectPath: [
        "/shipPlan/addContainer",
        "/shipPlan/addBulk",
        "/shipPlan/loadList", 
        "/shipPlan/unloadList", 
        "/heavyEmpty/heavyEmpty", 
        "/heavyEmpty/emptyHeavyNum", 
        "/heavyEmpty/emptyHeavyNoNum", 
        "/emptyBox/emptyBox", 
        "/heavyBox/heavyBox", 
        "/heavyBox/heayBoxNum", 
        "/emptyBox/emptyBoxNum", 
        "/emptyBox/emptyBoxNoNum", 
        "/unpacking/unpacking", 
        "/unpacking/packingNum", 
        "/unpacking/packingNoNum", 
        "/goodContent/unloadLift", 
        "/goodContent/unloadIn", 
        "/goodContent/loadLift", 
        "/goodContent/loadIn", 
        "/goodContent/import", 
        "/goodContent/output",
        "/whiteCard/whiteCard"
      ]
    }
  },
}
</script>

<style scoped lang="scss">
.menuBox {
  position: relative;
}

.whiteColor {
  color: white !important;

  &:hover {
    background: #5293FF;
    border-radius: 5px 5px 0px 0px;
    color: white;
  }
}

.blueColor {
  color: #333333;
}

.common {
  transition: all 0.3s;
  opacity: 0;
  position: absolute;
  top: 80px;
  left: -300px;
  visibility: hidden;
}

.active {
  opacity: 1;
  top: 40px;
  display: flex;
  visibility: inherit;
}

.menuList {
  span {
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;

    &:last-child {
      margin-right: 0;
    }

    &:hover {
      color: #0C4AC1;
    }
  }

}

.spanactive {
  color: #0C4AC1;
}

.menu-active {
  background: #5293FF;
  border-radius: 5px 5px 0px 0px;
  color: white;
}
</style>